<script setup lang="tsx">
import { defineProps } from 'vue'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { useForm } from '@/hooks/web/useForm'
import { Form } from '@/components/Form'
import { tagsWithInputStore } from '@/store/modules/tagsWithInput'

// 定义组件的 props
const props = defineProps({
  tagsWithInputStoreID: {
    type: String,
    required: true
  }
})

const { t } = useI18n()
const tagsWithInputStoreObj = tagsWithInputStore(props.tagsWithInputStoreID)

const { formRegister: tagsFormRegister, formMethods: tagsFormMethods } = useForm()
const {
  // setValues,
  getFormData: getTagsFormData,
  getElFormExpose: getTagsElFormExpose
  // setSchema
} = tagsFormMethods
// 表单提交方法
const formSubmit = async () => {
  const elFormExpose = await getTagsElFormExpose()
  elFormExpose?.validate(async (valid) => {
    if (valid) {
      const formData = await getTagsFormData()
      tagsWithInputStoreObj.tagsList.push(formData.tags)
      tagsWithInputStoreObj.isTagsDialogVisible = false
    } else {
      console.log('submit fail')
    }
  })
}
</script>

<template>
  <Dialog
    width="30%"
    v-model="tagsWithInputStoreObj.isTagsDialogVisible"
    :title="t('customer.tags')"
  >
    <Form
      ref="tagsForm"
      :schema="tagsWithInputStoreObj.schema"
      @register="tagsFormRegister"
      style="margin: 10px"
    />
    <template #footer>
      <BaseButton type="primary" @click="formSubmit">{{ t('dialogDemo.submit') }}</BaseButton>
      <BaseButton @click="tagsWithInputStoreObj.isTagsDialogVisible = false">{{
        t('dialogDemo.close')
      }}</BaseButton>
    </template>
  </Dialog>
</template>

<style scoped>
.container {
  width: 98%;
  padding: 10px 10px 20px;
  margin-right: 10px;
  overflow: auto;
}
</style>
